<template>
    <div class="btns">
        <div class="btn"
            v-for="item in themeArr"
            :key="item"
            @click="changeTheme(item)">
            {{item}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'Theme',
    data() {
        return {
            themeArr: ['default-theme', 'theme-1', 'theme-2'],
            currentTheme: 'default-theme'
        }
    },
    methods: {
        changeTheme(item) {
            this.currentTheme = item;
        }
    },
    mounted () {
        const theme = localStorage.getItem('theme');
        if (theme && this.themeArr.indexOf(theme) !== -1) {
            this.currentTheme = theme;
        }
        window.document.documentElement.setAttribute('data-theme', this.currentTheme);
    },
    watch: {
        currentTheme(val) {
            // 本地存储主题
            localStorage.removeItem('theme');
            localStorage.setItem('theme', val);
            window.document.documentElement.setAttribute('data-theme', val);
        }
    }
}
</script>

<style lang="scss" scoped>
.btns {
    display: flex;
    align-items: center;
    .btn {
        padding: 0 10px;
        height: 40px;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        background-color: #333;
        border: 2px solid;
        cursor: pointer;
        @include color();
        @include border-color();
    }
}
</style>
